<template>
	<picker @change="bindPickerChange" :value="pickerIndex" :range="realColumns" :range-key="labelKey">
		<view @tap="bindPickerTap" :style="{color:pickerIndex>0?'var(--nut-black, #000)':'gray'}">
			{{realColumns[pickerIndex][labelKey]}}
		</view>
	</picker>
</template>

<script setup>
	import {
		defineProps,
		computed,
		ref,
		watch,
		defineEmits,
	} from 'vue'
	const {
		defaultValue,
		columns,
		valueKey,
		labelKey,
	} = defineProps(['defaultValue', 'columns', 'valueKey', 'labelKey'])

	const emit = defineEmits(['confirm'])

	const realColumns = computed(() => {
		return [{
				[valueKey]: '',
				[labelKey]: '全部'
			},
			...columns
		]
	})


	const pickerIndex = ref(realColumns.value.findIndex(item => {
		return item[valueKey] == defaultValue
	}))

	const bindPickerChange = ({
		detail
	}) => {
		pickerIndex.value = detail.value;
		emit(
			'confirm', {
				value: realColumns.value[detail.value][valueKey],
				row: realColumns.value[detail.value]
			}
		)
	}

	const bindPickerTap = () => {
		console.log(12, pickerIndex.value);
	}
</script>

<style>
</style>